﻿@{
    ViewBag.Title = "Home Page";

    Layout = null;
}

<link href="~/layer/skin/layer.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/layer/layer.js"></script>

<button onclick="ShowDialog()">弹出Html代码窗--你昨晚是不是打游戏了</button>

<button onclick="ShowDialog2()">弹出页面链接的窗口</button>

<button onclick="ShowDialog3()">提示框</button>

<script>

    //layer提供了5种层类型：
    //   0：信息框，默认
    //   1：页面层 (拼接html或jquery选择器选中的代码)
    //   2：iframe层 
    //   3：加载层
    //   4：tips层

    function ShowDialog() {
        var tmpHtml = '<table>';
        tmpHtml += '<tr><td>标题</td><td><input /></td></tr>';
        tmpHtml += ' <tr><td>姓名</td><td><input /></td></tr>';
        tmpHtml += ' <tr><td>家庭住址</td><td><input /></td></tr>';
        tmpHtml += '<tr><td></td><td><button onclick="closepage()">关闭</button></td> </tr>';
        tmpHtml += '</table>';

        ////页面层
        //layer.open({
        //    type: 1,
        //    title: 'html代码拼接的弹窗',
        //    shade: 0,//[0.8, '#fff'],// 0.3,  //遮罩,如果想定义别的颜色,可以shade:[0.5,'#fff']
        //    skin: 'layui-layer-nobg', //加上边框样式
        //    area: ['420px', '240px'], //宽高
        //    content: tmpHtml
        //});

        layer.open({
            type: 1,
            title: '代码拼接的弹窗',
            shade: [0.1, 'red'],
            skin: 'layui-layer-rim', //加上边框
            area: ['420px', '240px'], //宽高
            content: tmpHtml
        });

    }

    function ShowDialog2() {
        var id = 99;
        layer.open({
            type: 2,
            title: '犹如故人归',
            skin: 'layui-layer-rim', //加上边框
            area: ['620px', '440px'], //宽高
            content: '/home/about?id=' + id
        });
    }

    function closepage() {
        layer.closeAll();
    }

    function ShowDialog3() {

        layer.msg('good luck!');

        //layer.msg('马上跳转了，看清楚点。。', {
        //   icon: 1,
        //    offset: ['50%'],
        //    time: 3000 //默认3秒关闭
        //}, function () {
        //    window.location.href = "/home/about";
        //});
    }
</script>